<template>
	<view>
		<view class="pass-view">
			<view class="pass-title">
				输入密码访问
			</view>
			<view class="pass-desrc">
				本内容需输入密码阅读原文
			</view>

			<view class="pass-input-view">
				<input :class="isError == 'suss' ? 'pass-input':'pass-input-err'" type="text" placeholder="访问密码"
					v-model="inputValue" />
				<view class="pass-btn" @tap="passTap()">
					<image class="fengrui-img" src="../../static/data/son.svg" mode="aspectFit"></image>
				</view>
			</view>

			<view class="pass-desrc-err" v-if="isError == 'err'">
				*密码输入错误
			</view>
			<view class="pass-desrc-pass" v-if="getPass != '' && isError != 'err'">
				已自动填充密码
			</view>

			<view class="pass-h3">
				获取密码
			</view>
			<view class="pass-h3-desrc">
				<block v-if="public_name !=''">可以通过“<text class="pass-h3-text">关注{{public_name}}</text>”</block>
				<block v-if="public_key !=''">回复“<text class="pass-h3-red">{{public_key}}</text>”获取访问密码，</block>
				<block v-if="public_step == true">详情下方“<text class="pass-h3-text">查看步骤</text>”按钮根据步骤操作；</block>
				若有任何疑问下方联系客服
			</view>
		</view>

		<!-- 提问转发 -->
		<view class="cover-list-view" style="margin-top: 60rpx;">
			<view>
				<view class="cover-list-icon" @tap="stepTap()">
					<image class="fengrui-img" src="../../static/index/dstrict-2.svg" mode="aspectFit">
					</image>
				</view>
				<view class="cover-list-font">查看步骤</view>
			</view>
			<view>
				<view class="cover-list-icon" @tap="followTap()">
					<image class="fengrui-img" src="../../static/index/title-img.svg" mode="aspectFit">
					</image>
				</view>
				<view class="cover-list-font">关注</view>
			</view>

			<button class="cover-list-btn" open-type="contact">
				<view class="cover-list-icon">
					<image class="fengrui-img" src="../../static/my/customer.svg" mode="aspectFit">
					</image>
				</view>
				<view class="cover-list-font">咨询客服</view>
			</button>

			<button class="cover-list-btn" open-type="share">
				<view class="cover-list-icon" style="height: 58rpx;">
					<image class="fengrui-img" src="../../static/data/share.svg" mode="aspectFit">
					</image>
				</view>
				<view class="cover-list-font">分享</view>
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		name: "common-pass",
		data() {
			return {
				inputValue: '',

			};
		},
		props: {
			isError: "",
			getPass: "",
			public_name: "",
			public_key: "",
			public_step: false,
		},
		// 子组件页面初始化
		beforeMount() {
			setTimeout(() => {
				if (this.getPass != '') { //判断是有密码缓存
					this.inputValue = this.getPass;
				}
			}, 500)
		},
		methods: {
			// 按钮点击
			passTap() {
				if (this.inputValue == "") {
					uni.showToast({
						title: "没有输入内容",
						icon: "error",
					})
				} else {
					this.$emit('passTap', this.inputValue)
					console.log(this.inputValue, '按钮点击')
				}

			},
			// 关注
			followTap() {
				uni.navigateTo({
					url: '/pages/follow/follow'
				})
			},
			// 教程步骤
			stepTap() {
				uni.navigateTo({
					url: '/pages/step/step'
				})
			},

		}

	}
</script>

<style>
	/* 密码访问 */
	.pass-h3 {
		margin: 220rpx 60rpx 0 60rpx;
		font-size: 34rpx;
		font-weight: bold;
		line-height: 50rpx;
	}

	.pass-h3-desrc {
		margin: 30rpx 60rpx;
		color: #b1b1b1;
		font-size: 28rpx;
	}

	.pass-h3-text {
		color: #007AFF;
		font-size: 30rpx;
		font-weight: bold;
	}

	.pass-h3-red {
		color: red;
		font-size: 30rpx;
		font-weight: bold;
	}

	.pass-input-view {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 60rpx;
	}

	.pass-btn {
		width: 100rpx;
		height: 100rpx;
		border-radius: 200rpx;
	}

	.pass-input {
		background-color: #E7EEFF;
		height: 100rpx;
		padding: 0 60rpx;
		width: 60%;
		border-radius: 200rpx;
		letter-spacing: 20rpx;
	}

	/* 定义动画关键帧 */
	@keyframes shake {

		0%,
		100% {
			transform: translateX(0);
		}

		25% {
			transform: translateX(-4px);
		}

		50% {
			transform: translateX(4px);
		}

		75% {
			transform: translateX(-4px);
		}
	}

	.pass-input-err {
		border: 1px red solid;
		color: red;
		height: 100rpx;
		padding: 0 60rpx;
		width: 60%;
		border-radius: 200rpx;
		animation: shake 1s ease-in-out 0s infinite alternate;
		animation-iteration-count: 1;
	}

	.pass-desrc {
		font-size: 28rpx;
		margin: 100rpx 90rpx 30rpx 90rpx;
		color: #b1b1b1;
	}

	.pass-desrc-err {
		font-size: 28rpx;
		margin: 20rpx 90rpx 30rpx 90rpx;
		color: red;
	}

	.pass-desrc-pass {
		font-size: 28rpx;
		margin: 20rpx 90rpx 30rpx 90rpx;
		color: #24A54F;
	}

	.pass-title {
		font-size: 60rpx;
		font-weight: bold;
		margin: 150rpx 60rpx 0rpx 60rpx;
	}

	.pass-view {
		width: 100%;
		height: 100%;
	}

	/* 提问转发 */
	.cover-list-icon {
		height: 64rpx;
		width: 64rpx;
		display: block;
		margin: auto;
	}

	.cover-list-btn {
		margin: 0rpx;
		padding: 0rpx;
		background-color: unset;
		line-height: unset;
	}

	.cover-list-font {
		color: #b2b2b2;
		font-size: 24rpx;
		text-align: center;
		/* margin-top: 16rpx; */
	}

	.cover-open-right-bot {
		width: 100%;
		height: 100%;
		transform: rotate(180deg);
	}

	.cover-open-right-up {
		width: 100%;
		height: 100%;
	}

	.cover-open-right {
		position: absolute;
		right: 44rpx;
		height: 32rpx;
		width: 32rpx;
	}

	.cover-quest {
		border-radius: 100rpx;
		height: 64rpx;
		line-height: 64rpx;
		width: 24%;
		background-color: #f3f3f3;
		color: #b7b7b7;
		font-size: 24rpx;
		padding-left: 40rpx;
	}

	.cover-list-view {
		margin-bottom: 28rpx;
		height: 110rpx;
		display: flex;
		justify-content: space-around;
		align-items: center;
		overflow: hidden;
	}

	.cover-h-icon {
		height: 50rpx;
		width: 50rpx;
		overflow: hidden;
		margin-left: 28rpx;
		margin-right: 14rpx;
	}

	.cover-view-h {
		margin: 28rpx 28rpx 0rpx 28rpx;
		color: #FFFFFF;
		height: 80rpx;
		font-size: 28rpx;
		display: flex;
		align-items: center;

	}

	.cove-bom {
		position: fixed;
		bottom: 0rpx;
		left: 0rpx;
		width: 100%;
		z-index: 1025;
	}

	.fengrui-img {
		height: 100%;
		width: 100%;
	}

	/* 暗黑模式下应用的样式 */
	@media (prefers-color-scheme: dark) {
		.pass-input {
			background-color: #202020;
		}
	}
</style>